<template>
  <div class="layout" style="border:1px solid #333333;span-align: center;padding:10px 0">


  <div class="flex-row items-center group_3">
    <img
      class="img_3 img_4"
      src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/6503e56f5a7e3f0310def0e5/6503e95eec8866001127b20f/16967453010248280424.png"
    />
    <span class="span">限时优惠券</span>
    <img
      class="img_3"
      src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/6503e56f5a7e3f0310def0e5/6503e95eec8866001127b20f/16967453010248280424.png"
    />

  </div>


<div class="flex-col group_4">
  <div class="flex-col list space-y-12">
    <div class="flex-col list-item space-y-4" v-for="(item, index) in items" :key="index">
      <img
        class="shrink-0 self-end img_5"
        src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/6503e56f5a7e3f0310def0e5/6503e95eec8866001127b20f/16967453014661054922.png"
      />
      <div class="flex-row items-center group_5">
        <div class="flex-col flex-auto group space-y-13">
          <span class="self-start font_2">100元代金券</span>
          <span class="self-start font_3 span_2">有效期：2023-08-20 12:00:00</span>
          <div class="flex-row items-center space-x-4">
            <img
              class="shrink-0 img_6"
              src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/6503e56f5a7e3f0310def0e5/6503e95eec8866001127b20f/16967453012039328397.png"
            />
            <span class="font_5">除酒水以外收银都可以享受本优惠券</span>
          </div>
        </div>
        <div class="shrink-0 section_4"></div>
        <div class="flex-col justify-start items-end shrink-0 span-wrapper">
          <span class="font_4 span_3">领取</span>
        </div>
      </div>
      <img
        class="shrink-0 self-end img_5"
        src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/6503e56f5a7e3f0310def0e5/6503e95eec8866001127b20f/16967453016104752450.png"
      />
    </div>
  </div>




</div>


  </div>
</template>
<script>
export default {
  data() {
    return {
       items: [null, null, null, null],
      selected: {
        // 已选数据
        index: 0,
      },
    };
  },
  props: ["res"],
  watch: {
    res: {
      handler(val) {
        // 监听父级的值 如果有值将值赋给selected
        if (val) {
          this.selected.val = this.res.list[0].listWay[0].type;
        }
      },
      immediate: true,
    },
  },
  methods: {
    // 删除商品
    closeGoods(val, index) {
      this.res.list[0].listWay.splice(index, 1);
    },
    // 切换商品列表
    handleClickTitle(val, index) {
      this.selected.index = index;
      this.selected.val = val.title;
    },
  },
};
</script>
<style  scoped>
@import "./tpl_codefun.css";
</style>
<style lang="scss" scoped>
@import "./tpl.scss";

.group_3 {
  margin-top: 56rpx;
}
.img_3 {
  width: 16rpx;
  height: 16rpx;
}
.img_4 {
  margin-left: 216rpx;
}
.span {
  margin-left: 20rpx;
  color: #ff5733;
  font-size: 40rpx;
  font-family: AlibabaPuHuiTi;
  font-weight: 700;
  line-height: 38rpx;
}


.group {
  padding: 0 16rpx;
}
.group_4 {
  margin-top: 44rpx;
}
.list {
  padding: 0 8rpx;
}
.space-y-12 > div:not(:first-child),
.space-y-12 > span:not(:first-child),
.space-y-12 > img:not(:first-child) {
  margin-top: 24rpx;
}
.list-item {
  margin-right: 14rpx;
  padding: 0 8rpx;
  background-color: #ff300017;
  overflow: hidden;
  border: solid 1rpx #ffd95e;
}
.img_5 {
  margin-right: 204rpx;
  width: 18rpx;
  height: 8rpx;
}
.group_5 {
  margin-right: 12rpx;
}
.space-y-13 > div:not(:first-child),
.space-y-13 > span:not(:first-child),
.space-y-13 > img:not(:first-child) {
  margin-top: 26rpx;
}
.font_2 {
  font-size: 32rpx;
  font-family: HarmonyOSSansSC;
  line-height: 30rpx;
  color: #ff3000;
}
.font_3 {
  font-size: 24rpx;
  font-family: HarmonyOSSansSC;
  line-height: 22rpx;
  color: #333333;
}
.span_2 {
  opacity: 0.53;
}
.img_6 {
  width: 26rpx;
  height: 26rpx;
}
.font_5 {
  font-size: 24rpx;
  font-family: HarmonyOSSansSC;
  line-height: 22rpx;
  color: #626980;
}
.section_4 {
  background-img: repeating-linear-gradient(90deg, #ff3000, #ff3000 2.63%, transparent 2.63%, transparent 5.256%);
  background-position: -2rpx 0px;
  width: 1rpx;
  height: 152rpx;
}
.span-wrapper {
  margin-left: 48rpx;
  margin-right: 8rpx;
  padding: 16rpx 0;
  background-color: #e80909;
  width: 144rpx;
  height: 60rpx;
}
.font_4 {
  font-size: 28rpx;
  font-family: HarmonyOSSansSC;
  line-height: 24rpx;
  color: #ffffff;
}
.span_3 {
  line-height: 26rpx;
}
.group_6 {
  margin-top: 32rpx;
}
.space-y-14 > div:not(:first-child),
.space-y-14 > span:not(:first-child),
.space-y-14 > img:not(:first-child) {
  margin-top: 28rpx;
}
.img_7 {
  border-radius: 20rpx;
  filter: drop-shadow(0px 0px 8rpx #ffbd5208);
  width: 710rpx;
  height: 774rpx;
}
.img_8 {
  width: 708rpx;
  height: 1218rpx;
}
.section_5 {
  margin-top: 60rpx;
  padding-bottom: 60rpx;
  background-color: #ffffff;
  border-radius: 20rpx;
  filter: drop-shadow(0px 0px 8rpx #ffbd5208);
  overflow: hidden;
  border: solid 1.2rpx #cfd5e640;
}
.space-y-4 > div:not(:first-child),
.space-y-4 > span:not(:first-child),
.space-y-4 > img:not(:first-child) {
  margin-top: 8rpx;
}
.section_6 {
  padding: 28rpx 24rpx 40rpx;
  background-img: linear-gradient(180deg, #d3dbf21f -36.1%, #ffffff75 92.3%);
}
.space-x-4 > div:not(:first-child),
.space-x-4 > span:not(:first-child),
.space-x-4 > img:not(:first-child) {
  margin-left: 8rpx;
}
.span_4 {
  color: #081329;
}
.span_5 {
  color: #666e7a;
  line-height: 23rpx;
  opacity: 0.6;
}
.grid {
  height: 1516rpx;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  row-gap: 76rpx;
}
.grid-item {
  padding-left: 18rpx;
  padding-right: 12rpx;
}
.img_9 {
  width: 324rpx;
  height: 318rpx;
}
.font_6 {
  font-size: 28rpx;
  font-family: HarmonyOSSansSC;
  line-height: 44rpx;
  color: #081329;
}
.span_6 {
  margin: 16rpx 24rpx 0 16rpx;
}
.group_7 {
  margin-top: 16rpx;
  padding: 0 20rpx;
}
.font_9 {
  font-size: 16rpx;
  font-family: HarmonyOSSansSC;
  line-height: 15rpx;
  color: #666e7a;
}
.font_10 {
  font-size: 16rpx;
  font-family: HarmonyOSSansSC;
  line-height: 12rpx;
  color: #ff5733;
}
.group_8 {
  line-height: 24rpx;
  height: 24rpx;
}
.font_7 {
  font-size: 28rpx;
  font-family: HarmonyOSSansSC;
  line-height: 22rpx;
  color: #ff5733;
}
.font_8 {
  font-size: 32rpx;
  font-family: HarmonyOSSansSC;
  line-height: 24rpx;
  color: #ff5733;
}
.span_7 {
  word-break: break-all;
}
.span_8 {
  line-height: 21rpx;
}
</style>
